<template>
	<div class="edit-popup">
		<popup
				ref="popupRef"
				:title="popupTitle"
				:async="true"
				width="700px"
				@confirm="handleSubmit"
				@close="handleClose"
		>
			<el-form
					ref="formRef"
					:model="formData"
					label-width="120px"
					:rules="formRules"
			>
				<el-form-item label="类型" prop="type">
					<el-radio-group v-model="formData.type">
						<el-radio :label="1">轮播图</el-radio>
						<el-radio :label="2">视频</el-radio>
					</el-radio-group>
				</el-form-item>
				<template v-if="formData.type == 1">
					<el-form-item label="图片名称" prop="title" >
						<el-input v-model="formData.title" placeholder="请输入入口名称" />
					</el-form-item>
					<el-form-item label="跳转链接" prop="url" >
						<el-input v-model="formData.url" placeholder="请输入跳转链接" />
					</el-form-item>
				</template>

				<template v-if="formData.type == 2">
					<el-form-item label="视频名称" prop="title" >
						<el-input v-model="formData.title" placeholder="请输入入口名称" />
					</el-form-item>
					<el-form-item label="视频链接" prop="video">
						<el-input v-model="formData.video" placeholder="请上传视频链接" style="margin-bottom: 10px"/>
						<!--		    <material-picker :limit="1" v-model="formData.live_logo" />-->
<!--						<el-image v-if="formData.video" style="width: 100px; height: 100px" :src="formData.video" />-->
						<!--             <material-picker :limit="9" v-model="formData.slider" />-->
						<upload
								class="mr-3"
								:type="'video'"
								:show-progress="true"
								@change="actionImg('video')"
								ref="coverRefVideo"
						>
							<el-button type="primary">本地上传</el-button>
						</upload>
					</el-form-item>
				</template>
				<el-form-item label="封面" prop="image">
					<!--		    <material-picker :limit="1" v-model="formData.live_logo" />-->
					<div style="display: flex; flex-direction: column; gap: 10px">
						<el-image v-if="formData.image" style="width: 100px; height: 100px" :src="formData.image" />
						<!--             <material-picker :limit="9" v-model="formData.slider" />-->
						<upload
								class="mr-3"
								:type="'image'"
								:show-progress="true"
								@change="actionImg('image')"
								ref="coverRefImg"
						>
							<el-button type="primary">本地上传</el-button>
						</upload>
					</div>
				</el-form-item>
			</el-form>
		</popup>
	</div>
</template>
<script lang="ts" setup>
	import type { FormInstance } from "element-plus";
	import {
		videoAdd,
		detailVideo,
		videoEdit,
	} from "@/api/reception";
	import Popup from "@/components/popup/index.vue";
	import { useDictOptions } from '@/hooks/useDictOptions'
	const emit = defineEmits(["success", "close"]);
	const formRef = shallowRef<FormInstance>();
	const popupRef = shallowRef<InstanceType<typeof Popup>>();
	const mode = ref("add");
	const popupTitle = computed(() => {
		return mode.value == "edit" ? "编辑" : "新增";
	});
	const formData = reactive({
		id:'',
		title:'',
		video:'',
		image:'',
		type: 1,
		url:'',
	});

	const formRules = {
		title: [
			{
				required: true,
				message: "请输入口名称",
				trigger: "blur",
			},
		],
		url: [
			{
				required: true,
				message: "请输入跳转链接",
				trigger: "blur",
			},
		],
		image: [
			{
				required: true,
				message: "请上传视频封面",
				trigger: "blur",
			},
		],

	};

	const open = (type = "add") => {
		mode.value = type;
		popupRef.value?.open();
	};

	const setFormData = (data: Record<any, any>) => {
		for (const key in formData) {
			if (data.info[key] != null && data.info[key] != undefined) {
				//@ts-ignore
				formData[key] = data.info[key];
			}
		}
	};

	const getDetail = async (row: Record<string, any>) => {
		const data = await detailVideo({
			video_id: row.id,
		});
		setFormData(data);
	};

	const handleClose = () => {
		emit("close");
	};

	// 照片更新
	const coverRefImg = ref(null)  // 封面
	const coverRefVideo = ref(null)  // 封面
	const actionImg = async (type: string) => {
		if (type === 'image') {
			formData.image = coverRefImg.value.fileList[0].response.data.url;
		}
		if (type === 'video') {
			formData.video = coverRefVideo.value.fileList[0].response.data.url;
		}
	};

	//提交
	const handleSubmit = async () => {
		await formRef.value?.validate();
		mode.value == "edit"
				? formData.video_id = formData.id
				: delete formData.id;
		mode.value == "edit"
				? await videoEdit(formData)
				: await videoAdd(formData);
		popupRef.value?.close();
		emit("success");
	};

	defineExpose({
		open,
		setFormData,
		getDetail,
	});
</script>
